<style media="screen">
  #contractFLow .table .content-item>div {
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 40px;
  }

  #contractFLow .table .content-item>div div {
    height: auto;
    line-height: 32px;
  }

  #contractFLow .block-title {
    font-weight: 500;
    font-size: 14px;
    color: #929BA8;
    height: 40px;
    line-height: 40px;
  }

  .templateList {
    width: 780px;
    background: #fff;
    box-shadow: 0px 0px 6px 0px rgba(136, 136, 136, 0.75);
    border-radius: 6px;
  }

  .templateList_title {
    height: 46px;
    text-align: center;
    line-height: 46px;
  }

  .templateList_content {
    background: #F9F9F9;
    padding: 24px 0px 77px 16px;
  }

  .TC_header {
    color: #666;
    font-size: 14px;
    padding-bottom: 20px;
    border-bottom: 1px solid #E8E8E8;
    padding-right: 20px;
    margin-bottom: 18px;
  }

  .TC_header>div {
    display: flex;
    justify-content: space-between;
    align-items: center
  }

  .TC_header>ul {
    display: flex;
    align-items: center;
  }

  .TC_header>ul>li {
    display: flex;
    align-items: center;
    margin-right: 50px;
  }

  .TC_mask {
    display: none;
    position: absolute;
    z-index: 9;
    width: 140px;
    height: 36px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    /* text-align: center; */
    text-indent: 47px;
    line-height: 36px;
    color: #fff;
    cursor: pointer;
  }

  .check-auth {
    display: inline-block;
    width: 13px;
    height: 13px;
    position: relative;
    border: 1px solid #666;
    border-radius: 4px;
    margin-right: 10px;
  }

  .check-auth-active {
    display: inline-block;
    background-image: url(assets/images/Check.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 8px;
    background-color: #44B548;
    width: 13px;
    height: 13px;
    border: 1px solid #44B548;
    border-radius: 4px;
    margin-right: 10px;
  }

  .check-item {
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    z-index: 99;
    background: #fff;
    border-radius: 8px;
    right: 10px;
    top: 9px;
  }

  .check-item-active {
    display: inline-block;
    background-image: url(assets/images/Check.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 8px;
    background-color: #5e67a5;
    width: 13px;
    height: 13px;
    border: 1px solid #5e67a5;
    border-radius: 4px;
    margin-right: 10px;
  }

  .tem-item {
    width: 140px;
    height: 36px;
    background: #44B548;
    box-shadow: 1px 1px 2px 0px rgba(163, 184, 198, 0.5);
    border-radius: 4px;
    margin: 0 10px 10px 0;
    overflow: hidden;
    position: relative;
    line-height: 36px;
    text-indent: 10px;
    color: #fff;
    padding-right: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .tem-item:hover .TC_mask {
    display: block
  }

  .tem-item:hover .TC_text {
    -webkit-filter: blur(3px);
  }

  .tem-item-box {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
  }

  .TC_selected_active {
    color: #44B548
  }

  .TC_selected_icon {
    position: absolute;
    z-index: 9999;
    right: 12px;
    top: 12px;
    font-size: 12px;
  }

  .templateList_footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 56px;
  }

  .TC_close_icon {
    float: right;
    margin: 15px 20px 0 0;
  }

  .loadprogress {
    position: fixed;
    z-index: 999999;
    left: 0;
    bottom: 0;
    height: 20px;
    width: 500px;
    font-size: 12px;
    text-indent: 3px;
    line-height: 20px;
  }

  #contractFLow .fw-normal div {
    font-weight: normal !important;
  }

  .ZDY_item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
  }

  .ZDY_title {
    font-size: 14px;
    color: #999;
  }

  .ZDY_content {
    flex: 1;
    padding-right: 10px;
  }

  #contractFLow .title {
    width: auto;
  }

  .warmText {
    color: #ec4151;
    font-size: 12px;
  }

  .reletbox {
    height: 40px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    font-size: 14px;
    background: rgba(233, 134, 103, 0.23);
    border-radius: 4px;
    margin-bottom: 15px;
  }

  .reletbox div {
    width: 20px;
    line-height: 18px;
    text-align: center;
    border: 1px solid #e98667;
    border-radius: 2px;
    color: #E98667;
    margin-right: 10px;
  }

  .reletbox span {
    color: #999;
  }
</style>
<div class="upload-file"></div>
<section id="contractFLow">
  <ul class="contract-flow-nav">
    <li :class="{active:item.iscur}" v-for="(item,index) in nav" @click="switchNav(item,index)">{{item.name}}</li>
    <span class="nav-title">我的流程-合同详情</span>
  </ul>

  <div class="layout">
    <!--合同详情-->
    <section v-if="loadContractMesModule">
      <!-- 基本信息 -->
      <div class="border-b pb-10">
        <h3 class="title">主要信息</h3>
        <div class="reletbox" v-if="contract.renewFlag == 'N' && contract.renewContracts.length">
          <div>续</div>
          <span>续租合同管理编号：</span>
          <a target="_blank" :href="'#/contractNewDeatil?id='+item.id+'&ddtab=true&relet=true'"
            v-for="(item, index) in contract.renewContracts">{{item.mCode}}
            <span v-if="index < contract.renewContracts.length-1">,</span>
          </a>
        </div>

        <div class="reletbox" v-if="contract.renewFlag == 'Y'">
          <div>续</div>
          <span>原合同管理编号：</span>
          <a target="_blank"
            :href="'#/contractNewDeatil?id='+contract.originalContract.id+'&ddtab=true&relet=true'">{{contract.originalContract.mCode}}</a>
          </a>
        </div>
        <div class="row">
          <div class="col-md-2 title">合同编号：</div>
          <div class="col-md-2 item htbh" style="width:200px;">{{contract.cCode | formatUndefined}}</div>
          <div class="col-md-2 title">管理编号：</div>
          <div class="col-md-2 item"><a target="_blank"
              :href="'#/contractNewDeatil?id='+contract.id+'&proId='+contract.projectId+'&version=1&ddtab=true'">{{contract.mCode}}</a>
          </div>
          <div class="col-md-2 title">合同名称：</div>
          <div class="col-md-2 item ellipsis-1">{{contract.name | formatUndefined}}</div>
          <div class="col-md-2 title">合同状态：</div>
          <div class="col-md-1 item">{{contract.auditState | contractAuditState}}</div>
        </div>
        <div class="row">
          <div class="col-md-2 title">租赁期限：</div>
          <div class="col-md-2 item zlqx" style="width:200px;">{{contract.beginDate | formatDate}} 到
            {{contract.endDate | formatDate}}</div>
          <div class="col-md-2 title">签订日期：</div>
          <div class="col-md-2 item">{{contract.signTime | formatDate}}</div>
          <div class="col-md-2 title">合同类型：</div>
          <div class="col-md-1 item" style="width: 165px;">{{contract.contractType | contractType}}</div>
          <div class="col-md-2 title">经办人：</div>
          <div class="col-md-1 item">{{contract.operatorName | formatUndefined}}</div>

        </div>
        <div class="row">
          <div class="col-md-2 title" style="width: 107px;">首期付款日：</div>
          <div class="col-md-2 item zlqx" style="width:182px;">{{contract.firstPaymentDate | formatDate}}</div>
          <div class="col-md-2 title" style="width: 107px;">后续付款日：</div>
          <div class="col-md-2 item">
            {{contract.billDateBOA ? (contract.billDateBOA == 'B' ? '账单开始前' : '账单开始后') : '账单开始前'}}{{contract.billDateFixNum | formatUndefined}}{{contract.billDateFixType ? (contract.billDateFixType == 'TS' ? '个自然日' : '号') : '个自然日'}}
          </div>
          <div class="col-md-2 title pl-5" v-if="contract.relatedIntentCode">关联意向：</div>
          <div class="col-md-1 item ellipsis-1" v-if="contract.relatedIntentCode" :title="contract.relatedIntentCode">
            {{contract.relatedIntentCode}}</div>
        </div>
        <div class="row">
          <div class="col-md-2 title">备注：</div>
          <div class="col-md-10 item">{{contract.memo || '--'}}</div>
        </div>
      </div>
      <!-- 乙方 -->
      <div class="border-b pb-10 hl-global-detail-box">
        <h3 class="title">乙方</h3>
        <div class="hl-row">
          <div class="hl-row-item" style="width: 100%;">
            <div class="title">客户名称：</div>
            <div class="item">{{contract.zlfCompany}}</div>
          </div>
        </div>
        <div class="hl-row">
          <div class="hl-row-item">
            <div class="title">客户类型：</div>
            <div class="item">{{contract.zlfType | contractZlfType}}</div>
          </div>
          <div class="hl-row-item">
            <div class="title">所属行业：</div>
            <div class="item">{{ityName || '--'}}</div>
          </div>
        </div>
        <div class="hl-row">
          <div class="hl-row-item">
            <div class="title">{{contract.zlfType == 'C' ? '纳税人识别号' : '身份证'}}：</div>
            <div class="item">{{contract.idcode || '--'}}</div>
          </div>
          <div class="hl-row-item">
            <div class="title">{{contract.zlfType == 'C' ? '公司' : '个人'}}邮箱：</div>
            <div class="item">{{contract.email || '--'}}</div>
          </div>
        </div>
        <div class="hl-row">
          <div class="hl-row-item">
            <div class="title">法人：</div>
            <div class="item">{{contract.zlfLperson || '--'}}</div>
          </div>
          <div class="hl-row-item">
            <div class="title">联系电话：</div>
            <div class="item">{{contract.zlfLphone || '--'}}</div>
          </div>
        </div>
        <div class="hl-row">
          <div class="hl-row-item">
            <div class="title">联系人：</div>
            <div class="item">{{contract.zlfSperson}}</div>
          </div>
          <div class="hl-row-item">
            <div class="title">联系电话：</div>
            <div class="item">{{contract.zlfSphone}}</div>
          </div>
        </div>
        <div class="hl-row">
          <div class="hl-row-item" style="width: 100%;">
            <div class="title">联系地址：</div>
            <div class="item">{{contract.zlfAddress || '--'}}</div>
          </div>
        </div>
      </div>
      <!-- 自定义字段 -->
      <!-- 自定义 -->
      <div class="mt-15">
        <hl-custom-fileds type="CONTRACT" mode="detail" :data="tmpData"></hl-custom-fileds>
      </div>
      <!-- 出租资源 -->
      <div>
        <h3 class="title">出租资源</h3>
        <!-- 单元 -->
        <div v-if="building.length">
          <div class="hl-34 mr-10 color-333">单元({{totalArea | formatNum}}m²)</div>
          <div class="unit-table border">
            <div class="tb-title dy-flex border-b gradient-color">
              <div class="dy-fx-2">项目</div>
              <div class="dy-fx-2">楼栋</div>
              <div class="dy-fx-1">楼层</div>
              <div class="dy-fx-4">单元</div>
            </div>
            <div class="tb-content">
              <ul class="dy-flex project-cr">
                <li class="dy-fx-2 project">{{contract.projectName}}</li>
                <li class="dy-fx-7">
                  <ul class="dy-flex building-cr" v-for="(item,index) in building">
                    <li class="dy-fx-2 building">{{item.buildingName}}</li>
                    <li class="dy-fx-5">
                      <ul class="dy-flex floor-cr" v-for="(item1,index1) in item.floor">
                        <li class="dy-fx-1 floor">{{item1.floorName || '--'}}</li>
                        <li class="dy-fx-4 unit">
                          <b v-for="(item2,index2) in item1.unit" class="clearfix" style="float:left"
                            @click="getUnitDetails(item1.unitId[index2])">
                            <a href="javascript:;">{{item2}}</a>
                            <span :class="{hide:item1.originAcreage[index2] == 'undefined'}"
                              class="icon-Gm-explain origin-acreage"
                              @mouseenter="showUnitOriginAcreage(index2,item1.originAcreage[index2])"
                              @mouseleave="hideUnitOriginAcreage"></span>
                            <i v-if="index2 + 1 !== item1.unit.length">、</i>
                          </b>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 工位 -->
        <div v-if="wp.length">
          <div class="hl-34 mr-10 color-333" v-if="wp.length">工位({{wpTotalNum}}个)</div>
          <div class="position-table border" v-if="wp.length">
            <div class="tb-title dy-flex border-b gradient-color">
              <div class="dy-fx-3">项目</div>
              <div class="dy-fx-3">楼栋</div>
              <div class="dy-fx-1">楼层</div>
              <div class="dy-fx-1">单元</div>
              <div class="dy-fx-1">工位数</div>
              <div class="position-item">工位</div>
            </div>
            <ul class="tb-content">
              <li class="content-item dy-flex" v-for="(item,index) in wp" :buildingId="item.buildingId"
                :floorId="item.floorId" :unitId="item.unitId">
                <div class="dy-fx-3">{{contract.projectName}}</div>
                <div class="dy-fx-3">{{item.buildingName}}</div>
                <div class="dy-fx-1">{{item.floorName || '--'}}</div>
                <div class="dy-fx-1">{{item.unitName}}</div>
                <div class="dy-fx-1">{{item.num}}</div>
                <div class="position-item">
                  <span class="position">
                    <b v-for="(item1,index1) in item.positions">{{item1.positionName}}<i
                        v-if="index1 + 1 !== item.positions.length">、</i></b>
                  </span>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- 车位 -->
        <div v-if="st.length">
          <div class="hl-34 mr-10 color-333" v-if="st.length">车位({{stTotalNum}}个)</div>
          <div class="position-table border" v-if="st.length">
            <div class="tb-title dy-flex border-b gradient-color">
              <div class="dy-fx-3">项目</div>
              <div class="dy-fx-3">楼栋</div>
              <div class="dy-fx-1">楼层</div>
              <div class="dy-fx-1">单元</div>
              <div class="dy-fx-1">车位数</div>
              <div class="position-item">车位</div>
            </div>
            <ul class="tb-content">
              <li class="content-item dy-flex" v-for="(item,index) in st" :buildingId="item.buildingId"
                :floorId="item.floorId" :unitId="item.unitId">
                <div class="dy-fx-3">{{contract.projectName}}</div>
                <div class="dy-fx-3">{{item.buildingName}}</div>
                <div class="dy-fx-1">{{item.floorName || '--'}}</div>
                <div class="dy-fx-1">{{item.unitName}}</div>
                <div class="dy-fx-1">{{item.num}}</div>
                <div class="position-item">
                  <span class="position">
                    <b v-for="(item1,index1) in item.positions">{{item1.positionName}}<i
                        v-if="index1 + 1 !== item.positions.length">、</i></b>
                  </span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 租金押金 -->
      <div class="pb-10 border-b" v-if="!(building.length == 0 && wp.length == 0 && st.length !== 0)">
        <h3 class="title">固定租金</h3>
        <div class="row">
          <div class="col-md-3 dy-flex">
            <div class="title">租金单价：</div>
            <div class="item" v-if="rentPriceUnit === 'DM'">{{contract.rentPrice | formatNum}}元/m²/天</div>
            <div class="item" v-if="rentPriceUnit === 'MM'">{{contract.rentPrice | formatNum}}元/m²/月</div>
            <div class="item" v-if="rentPriceUnit === 'DG'">{{contract.rentPrice | formatNum}}元/个/天</div>
            <div class="item" v-if="rentPriceUnit === 'MG'">{{contract.rentPrice | formatNum}}元/个/月</div>
          </div>
          <div class="col-md-3 dy-flex">
            <div class="title">日租金：</div>
            <div class="item">{{contract.rentPriceDay | formatNum}}元/天</div>
          </div>
          <div class="col-md-3 dy-flex">
            <div class="title">月租金：</div>
            <div class="item">{{contract.rentPriceMonth | formatNum}}元/月</div>
          </div>
          <div class="col-md-3 dy-flex">
            <div class="title">有效租金：</div>
            <div class="item">{{(contract.effectiveRentDay  || effectiveRentDay) | formatNum}}元/m²/天</div>
          </div>
          <!-- <div class="col-md-2 title" style="width:80px;">日租金：</div>
          <div class="col-md-2 item">{{contract.rentPriceDay | formatNum}}元/天</div> -->
          <!-- {{dayRentPriceAlert}} -->
          <!-- <div class="col-md-2 title" style="width:80px;">月租金：</div>
          <div class="col-md-2 item">{{contract.rentPriceMonth | formatNum}}元/月</div> -->
          <!-- {{monthRentPriceAlert}} -->
        </div>
        <div class="row warmText">
          <div class="col-md-3">&nbsp;</div>
          <div class="col-md-3">{{dayRentPriceAlert}}</div>
          <div class="col-md-3">{{monthRentPriceAlert}}</div>
        </div>

        <div class="row" v-if="contract.intermediaryCommission != '0'">
          <div class="col-md-2 title">中介佣金：</div>
          <div class="col-md-2 item">
            <span>按月租金{{contract.intermediaryCommissionPercent*100}}%
              &nbsp;{{contract.intermediaryCommission | formatNum}}元</span>
          </div>
        </div>

        <div class="row">
          <div class="col-md-2 title">押付方式：</div>
          <div class="col-md-2 item">
            <span>押{{contract.depositPeriod}} 付{{contract.paymentPeriod}}</span>
          </div>
          <div class="col-md-1 title" style="width:130px;">租金滞纳金比例：</div>
          <div class="col-md-1 item">{{contract.rentLateFeePercent? contract.rentLateFeePercent + '%' : '--'}}</div>
        </div>
        <!-- 折扣月租金 -->
        <div class="row" v-if="contract.rentDiscountRate">
          <div class="col-md-3 dy-flex">
            <div class="title">折扣率：</div>
            <div class="item">{{contract.rentDiscountRate * 100 | formatNum}}%</div>
          </div>
          <div class="col-md-3 dy-flex">
            <div class="title">折后日租金：</div>
            <div class="item">{{contract.rentDiscountPriceDay | formatNum}}元/天</div>
          </div>
          <div class="col-md-3 dy-flex">
            <div class="title">折后月租金：</div>
            <div class="item">{{contract.rentDiscountPriceMonth | formatNum}}元/月</div>
          </div>

        </div>
      </div>
      <!-- 租金押金 -->
      <div class="pb-10" v-if="isYJflag" v-show="!(building.length == 0 && wp.length == 0 && st.length !== 0)">
        <h3 class="title">押金</h3>
        <div class="row">
          <div class="col-md-2 title" style="width: 100px">押金总金额：</div>
          <div class="col-md-2 item" style="margin-right:30px">{{yaTotal}}元</div>
        </div>
        <div class="table border mt-10">
          <div class="tb-title dy-flex border-b gradient-color">
            <div class="dy-fx-1">费用名</div>
            <div class="dy-fx-1">单价</div>
            <div class="dy-fx-1">押几{{contract.rentWay == 'D'?'天':'月'}}</div>
            <div class="dy-fx-1">总金额</div>
            <div class="dy-fx-1">滞纳金比例</div>
          </div>
          <ul class="tb-content border-b">
            <li class="content-item dy-flex" v-for="(item,index) in contract.expenses"
              v-if="item.expenseType == 'D' && (item.depositType == 'DR' || !item.depositType)">
              <div class="dy-fx-1">租金押金</div>
              <div class="dy-fx-1">--</div>
              <div class="dy-fx-1">{{item.expensePeriod || '--'}}</div>
              <div class="dy-fx-1">{{item.amount | formatNum}}</div>
              <div class="dy-fx-1">{{Number(item.lateFee * 100).toFixed(2)}}%</div>
            </li>
          </ul>
          <ul class="tb-content">
            <li class="content-item dy-flex" v-for="(item,index) in contract.expenses"
              v-if="item.expenseType == 'D' && item.depositType == 'DO'">
              <div class="dy-fx-1">{{item.expenseName}}</div>
              <div class="dy-fx-1">{{item.price | formatNum}}（元/平米/月）</div>
              <div class="dy-fx-1">{{item.expensePeriod || '--'}}</div>
              <div class="dy-fx-1">{{item.amount | formatNum}}</div>
              <div class="dy-fx-1">{{Number(item.lateFee * 100).toFixed(2)}}%</div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 阶梯租金 -->
      <div v-if="rent.length">
        <h3 class="title">阶梯租金</h3>
        <p style="margin-bottom: 5px"><span class="color-999">递增方式：</span>
          <span>{{contract.rentIncreaseWayValue ? contract.rentIncreaseWayValue : '下账期递增'}}</span></p>
        <div class="table border">
          <div class="tb-title dy-flex border-b gradient-color">
            <div class="dy-fx-2">阶梯开始时间</div>
            <div class="dy-fx-1">递增率</div>
            <div class="dy-fx-2">租金单价({{contract.rentPriceUnit == 'D'? '元/平米/天':'元/平米/月'}})</div>
            <div class="dy-fx-2">日租金(元/天)</div>
            <div class="dy-fx-2">月租金(元/月)</div>

            <div class="dy-fx-1" v-if="contract.rentDiscountRate">折扣率</div>
            <div class="dy-fx-2" v-if="contract.rentDiscountRate">折后日租金(元/天)</div>
            <div class="dy-fx-2" v-if="contract.rentDiscountRate">折后月租金(元/月)</div>
          </div>
          <ul class="tb-content">
            <li class="content-item dy-flex" v-for="(item,index) in rent">
              <div class="dy-fx-2">{{item.beginDate}}</div>
              <div class="dy-fx-1">{{Number(item.percent).toFixed(2)}}%</div>
              <div class="dy-fx-2">{{item.price | formatNum}}</div>
              <div class="dy-fx-2">{{item.dayPrice | formatNum}}</div>
              <div class="dy-fx-2">{{item.monthPrice | formatNum}}</div>
              <div class="dy-fx-1" v-if="contract.rentDiscountRate">{{(item.discount*100) | formatNum}}%</div>
              <div class="dy-fx-2" v-if="contract.rentDiscountRate">{{item.discountD | formatNum}}</div>
              <div class="dy-fx-2" v-if="contract.rentDiscountRate">{{item.discountM | formatNum}}</div>
            </li>
          </ul>
        </div>
      </div>

      <!-- 营业额抽成 -->
      <div v-if="contract.commissionRules.length">
        <h3 class="title">营业额抽成</h3>
        <p class="line-height-34">抽成方式: <span class="ml-10">{{ contract.commissionTypeVal }}</span> <span
            style="font-weight: normal;color: #E98667;font-size: 12px"
            v-if="contract.compareRentAmtFlag == 'Y'">(租金与抽成取其高)</span></p>
        <div class="table border">
          <div class="tb-title dy-flex gradient-color">
            <div class="dy-flex border-b dy-fx-8">
              <div class="dy-fx-1" style="font-weight: normal;">基数下限（＞元）</div>
              <div class="dy-fx-1" style="font-weight: normal;">基数上限（≤元）</div>
              <div class="dy-fx-1" style="font-weight: normal;">抽成比例（%）</div>
              <div class="dy-fx-1" style="font-weight: normal;">抽成下限（元）</div>
              <div class="dy-fx-1" style="font-weight: normal;">抽成上限（元）</div>
              <div class="dy-fx-1" style="font-weight: normal;">滞纳金比例（%）</div>
              <div style="width:150px">付款日期</div>
            </div>
            <div class="dy-fx-1 text-center" style="font-weight: normal;">付款周期（月）</div>
          </div>
          <div class="dy-flex">
            <ul class="tb-content dy-fx-8">
              <li class="content-item dy-flex" v-for="(item,index) in contract.commissionRules">
                <div class="dy-fx-1">{{ item.baseValDownLimit }}</div>
                <div class="dy-fx-1">
                  <span v-if="index < contract.commissionRules.length-1">{{ item.baseValUpLimit }}</span>
                  <span v-if="index == contract.commissionRules.length-1">不限</span>
                </div>
                <div class="dy-fx-1">{{ item.commissonPercent}}</div>
                <div class="dy-fx-1">{{ item.commissionDownLimit || '--' }}</div>
                <div class="dy-fx-1">{{ item.commissionUpLimit || '--' }}</div>
                <div class="dy-fx-1">{{ item.lateFeePercent || '--' }}</div>
                <div style="width:150px">
                  {{contract.commissionDateBoa ? (contract.commissionDateBoa == 'B' ? '账单开始前' : '账单开始后') : '账单开始前'}}{{contract.commissionDateFixNum | formatUndefined}}{{contract.commissionDateFixType ? (contract.commissionDateFixType == 'TS' ? '个自然日' : '号') : '个自然日'}}
                </div>
              </li>
            </ul>
            <div class="dy-fx-1 text-center border-l"
              :style="{height: contract.commissionRules.length*40 + 'px', lineHeight: contract.commissionRules.length*40 + 'px'}">
              {{ contract.commissionPaymentPeriod }}</div>
          </div>
        </div>
      </div>

      <!-- 免租期/装修期 -->
      <div v-if="freeDate.length">
        <h3 class="title">免租期/装修期</h3>
        <div class="table border">
          <div class="tb-title dy-flex border-b gradient-color">
            <div class="dy-fx-2">序号</div>
            <div class="dy-fx-4">免租/装修开始时间</div>
            <div class="dy-fx-4">免租/装修结束时间</div>
            <div class="dy-fx-2">账单去除</div>
            <div class="dy-fx-2">备注</div>
          </div>
          <ul class="tb-content">
            <li class="content-item dy-flex" v-for="(item,index) in freeDate">
              <div class="dy-fx-2">{{index+1}}</div>
              <div class="dy-fx-4">{{item.freeBeginDate | formatDate}}</div>
              <div class="dy-fx-4">{{item.freeEndDate | formatDate}}</div>
              <div class="dy-fx-2">
                <span v-show="index == 0">{{item.billHiddenFlag == 'Y' ? '是':'否' }}</span>
                <span v-show="index > 0">{{ '--' }}</span>
              </div>
              <div class="dy-fx-2">{{item.freeMemo || '--' }}</div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 周期性费项 -->
      <div v-if="pExpense.length">
        <h3 class="title">周期性费项</h3>
        <div class="table border">
          <div class="tb-title dy-flex border-b gradient-color">
            <div class="dy-fx-2">费用名</div>
            <div class="dy-fx-2">单价(元/平米/天)</div>
            <div class="dy-fx-1">日金额(元/天)</div>
            <div class="dy-fx-1">月金额(元/月)</div>
            <div class="dy-fx-1">付款周期</div>
            <div class="dy-fx-1">滞纳金比例</div>
            <div class="dy-fx-1">计费时间</div>
          </div>
          <ul class="tb-content">
            <li class="content-item dy-flex" v-for="(item,index) in pExpense">
              <div class="dy-fx-2">{{item.expenseName}}</div>
              <div class="dy-fx-2 dy-flex" style="justify-content: space-between;"><span
                  class="pl-5">{{item.price | formatNum}}</span> <span class="pr-5">{{ item.unitsVal }}</span></div>
              <div class="dy-fx-1">{{item.priceDay | formatNum}}</div>
              <div class="dy-fx-1">{{item.priceMonth | formatNum}}</div>
              <div class="dy-fx-1">{{item.expensePeriod}}</div>
              <div class="dy-fx-1">{{Number(item.lateFee * 100).toFixed(2)}}%</div>
              <div class="dy-fx-1">
                <div v-if="item.customPeriod.length">
                  <p v-for="item1 in item.customPeriod">{{item1.beginDate | formatDate}} 至
                    {{item1.endDate | formatDate}}</p>
                </div>
                <div v-else>同租赁周期</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 一次性费项 -->
      <div v-if="oExpense.length">
        <h3 class="title">一次性费项</h3>
        <div class="table border">
          <div class="tb-title dy-flex border-b gradient-color">
            <div class="dy-fx-1">费用名</div>
            <div class="dy-fx-1">单价(元/平米/天)</div>
            <div class="dy-fx-1">总金额</div>
            <div class="dy-fx-1">滞纳金比例</div>
          </div>
          <ul class="tb-content">
            <li class="content-item dy-flex" v-for="(item,index) in oExpense">
              <div class="dy-fx-1">{{item.expenseName}}</div>
              <div class="dy-fx-1">{{item.price | formatNum}}</div>
              <div class="dy-fx-1">{{item.amount | formatNum}}</div>
              <div class="dy-fx-1">{{Number(item.lateFee * 100).toFixed(2)}}%</div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 临时性费项 -->
      <div v-if="tExpense.length">
        <h3 class="title">临时费项</h3>
        <div class="table border fw-normal">
          <div class="tb-title dy-flex border-b gradient-color">
            <div class="dy-fx-1">费用名</div>
            <div class="dy-fx-3">金额</div>
            <div class="dy-fx-3">税率(%)</div>
          </div>
          <ul class="tb-content">
            <li class="content-item dy-flex" v-for="(item,index) in tExpense">
              <div class="dy-fx-1">{{item.expenseName}}</div>
              <div class="dy-fx-3">{{item.amount | formatNum}}</div>
              <div class="dy-fx-3">{{item.taxPercent*100 || '--'}}</div>
            </li>
          </ul>
        </div>
      </div>

      <!--付款计划-->
      <hl-pay-plan ref="payData" :data="payData" :is-edit="false" style="margin-top: 20px;">
        <hl-button @on-click="exportBill">导出</hl-button>
      </hl-pay-plan>

      <div class="ptb-10">
        <!--合同审核页面、待审核状态下显示审核按钮-->
        <hl-button type="primary" @on-click="passAudit" v-if="flowState && auditState == 'WA' && approveFlag == 'Y' ">
          审核通过</hl-button>
        <hl-button type="outline" @on-click="notPassAudit"
          v-if="flowState && auditState == 'WA' && approveFlag == 'Y' ">审核不通过</hl-button>
        <!--合同详情页面、流程状态为'进行中'且用户为流程的启动者可以撤回-->
        <hl-button type="primary" v-if="bpm.state === 'ON' && userid === bpm.starterId && !flowState"
          @on-click="withdrawCH">撤回</hl-button>
        <hl-button type="outline" v-if="bpm.state === 'ON' && userid === bpm.starterId && !flowState"
          @on-click="cuiban">催办</hl-button>
        <hl-button type="outline" size="large" @on-click="previewTemPrint">合同预览/导出</hl-button>
      </div>
    </section>
    <!--催办-->
    <section>

    </section>
    <!--流程信息-->
    <section v-show="loadFlowMesModule">
      <div class="border-b pb-10">
        <h4 class="block-title">流程信息</h4>
        <div class="row">
          <div class="col-md-1 liuceng-title color-999">流程编号：</div>
          <div class="col-md-9 item">{{bpm.bpmNo}}</div>
        </div>
        <div class="row">
          <div class="col-md-1 liuceng-title color-999">耗时：</div>
          <div class="col-md-9 item">{{calculateTimeDifference(bpm.startTime,bpm.endTime)}}</div>
        </div>
        <div class="row">
          <div class="col-md-1 liuceng-title color-999">发起人：</div>
          <div class="col-md-9 item">{{bpm.starterName | formatUndefined}}</div>
        </div>
        <div class="row">
          <div class="col-md-1 liuceng-title color-999">发起时间：</div>
          <div class="col-md-3 item">{{bpm.startTime | formatDetailDate}}</div>
        </div>
        <div class="row" v-if="bpm.userName">
          <div class="col-md-1 liuceng-title color-999">当前处理人：</div>
          <div class="col-md-9 line-height-34 pl-0">{{bpm.userName | formatUndefined}}</div>
        </div>
        <div class="row" v-if="bpm.currPhase">
          <div class="col-md-1 liuceng-title color-999">当前处理节点：</div>
          <div class="col-md-9 item">{{bpm.currPhase}}</div>
        </div>
        <div class="row">
          <div class="col-md-1 liuceng-title color-999">流程版本号：</div>
          <div class="col-md-9 item">{{bpm.version}}</div>
        </div>
      </div>

      <div class="pb-10 border-b">
        <h4 class="block-title">流程图</h4>
        <div class="business-liuceng-image-cr">
          <div class="content">
            <div class="flowlist-image">
              <div class="begin-circle">开始</div>
              <div class="middle-node-container relative">
                <ul class="middle-node-wrapper clearfix">
                  <li class="node-item" v-for="(item,index) in flowNode">
                    <div class="node-order">
                      <span>{{index + 1}}</span>
                    </div>
                    <div class="node-name">{{item.name}}</div>
                    <p class="person" v-if="item.userNames.length">{{item.userNames.join('/')}}</p>
                  </li>
                </ul>
              </div>
              <div class="end-circle">结束</div>
            </div>
          </div>
        </div>
      </div>

      <div class="pb-10" v-if="bpmList.length">
        <h4 class="block-title">处理历史</h4>
        <div class="deal-history-table box-i-shadow-1 br-4">
          <div class="table-title">
            <div class="table-item1">时间</div>
            <div class="table-item2">处理人</div>
            <div class="table-item3">操作说明</div>
            <div class="table-item4">信息</div>
          </div>
          <ul class="table-content" v-for="item in bpmList">
            <li class="table-item1">{{item.endTime | formatDetailDate}}</li>
            <li class="table-item2">{{item.fnUserName | formatUndefined}}</li>
            <li class="table-item3">{{item.taskName | formatUndefined}}</li>
            <li class="table-item4">{{item.memo | formatUndefined}}</li>
          </ul>
        </div>
      </div>
    </section>
    <!--文件信息-->
    <section v-show="loadRelevantFileModule">
      <div class="contract-file-container">
        <div class="upload-head-contract clearfix border-b pb-10">
          <div class="pull-left font-wt line-height-34 color-666">文件列表</div>
          <button class="pull-right s-btn-default btn font-14 " v-if="permissions.indexOf('c342') >= 0"
            @click="uploadFile">上传文件</button>
        </div>
        <div>
          <ul>
            <li class="clearfix border-b" v-for="(item,index) in contractFile">
              <p class="icon-Nav-contract-file file-name">
                <span>{{item.name}}</span>
              </p>
              <p class="pull-right line-height-45 file-btn dy-flex opera-but" style="align-items: center;height: 45px">
                <a class="icon-GM-preview" @click="previewImage(item.url)">
                  <b>预览</b>
                </a>
                <span class="block-D-P-D"></span>
                <a :href="item.url" :download="item.name" class="icon-Gm-download">
                  <b>下载</b>
                </a>
              </p>
            </li>
          </ul>
        </div>
      </div>
    </section>

    <!-- 合同打印、预览 -->
    <div class=" pop box-o-shadow contract-confirm-layer">
      <div class="templateList" v-if="TemplateModulShow == true">
        <div class="templateList_title">
          合同导出
          <span class="icon-Gm-close TC_close_icon" @click="TemplateModulShow = false"></span>
        </div>
        <div class="templateList_content">
          <div class="TC_header ">
            <div>
              <span>选择导出文件类型：<span style="color:#ccc"> (可多选)</span></span>
              <button type="button" class="btn s-btn-default" @click="addNewTem">新建模板</button>
            </div>
            <ul class="">
              <li v-for="(item,index) in TemTypeList">
                <span :class="selectedTemTypeList.indexOf(item) >= 0 ? 'check-auth-active':'check-auth'"
                  @click="selectedTemType(item)"></span>
                <span>{{item}}文档</span>
              </li>
            </ul>
          </div>
          <div class="TC_body">
            <div><span>选择导出模板：<span style="color:#ccc"> (请选择一个模板）</span></span>
            </div>
            <div class="tem-item-box">
              <ul class="tem-item" v-for="(item,index) in temList">
                <li class="TC_mask" @click="preview(item.id)">预览</li>
                <li class="TC_text  ellipsis-1">{{item.templateName}}</li>
                <span class="check-item"></span>
                <span class="icon-right-nav-Selected  TC_selected_icon"
                  :class="selectedTemList == item.id ? 'TC_selected_active':''" @click="selectedTem(item)"></span>
              </ul>
            </div>
          </div>

        </div>
        <div class="templateList_footer">
          <hl-button type="primary" @on-click="exportTemplate">导出</hl-button>
          <hl-button type="outline" @on-click="TemplateModulShow = false">取消</hl-button>
        </div>
      </div>

    </div>
  </div>
  <!--遮罩-->
  <div class="hllayer-mask" v-show="TemplateModulShow"></div>
  <!-- 单元详情 -->
  <unit-details :unit-id="unitId" :unit-details-flag="unitDetailsFlag" @close="closeUnitPop"></unit-details>
</section>

<script src="modules/rent/scripts/unit_details.js" charset="utf-8"></script>
<script src="modules/workbench/scripts/contract_flow.js" charset="utf-8"></script>
<script src="modules/contract/scripts/contract_public.js" charset="utf-8"></script>
